<template>
    <div class="app">
        <h1>app.vue 组件中的h1标签</h1>
        <h2>app.vue 组件中的h2标签</h2>
        <hr>
        <StylePage class="box"/>
    </div>
</template>
<script>
import StylePage from "./views/StylePage";

export default {
    components:{
        StylePage
    }
}
</script>
<style>
    h1{
        color: red;
        border: 1px solid black;
    }
</style>
<style scoped>
    h2{
        color: brown;
    }

    .box{
        border:2px solid sandybrown;
    }

    /* 通过 /deep/ 或者 ::v-deep 或者 >>> 将后续样式进行深度传递 */
    .box > ::v-deep h3 {
        color:saddlebrown;
    }
</style>